<template>
	<div class="com-check">
		<div class="check-item" v-for="item in options" :key="item.value" :class="{active:active===item.value}" @click="active = item.value">
			<div class="icon"> 
				<ComIcon v-if="item.icon" :icon="item.icon" size="10"></ComIcon>	
			</div>
			{{ item.label }}
		</div>
	</div>
</template>

<script setup lang="ts">
const props = defineProps({
    modelValue:{
        type: String
    },
	options: {
		type: Array,
		default: () => []
	}
});
const emit = defineEmits(['update:modelValue'])
const active = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
})
</script>

<style scoped lang="scss">
.com-check {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: calc(180px * 4 + 3 * 12px);
	.check-item {
		width: 180px;
		height: 32px;
		border: 1px solid #f1f1f1;
		border-radius: 6px;
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #666666;
		padding: 0 12px;
		cursor: pointer;
        gap: 6px;
		.icon {
			width: 14px;
			height: 14px;
			border-radius: 4px;
			border: 1px solid #ebf4ff;
			color: #2562ff;
			font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
		}
		&:hover {
			background-color: #f8f8f9;
		}
	}
    .active{
        border-color: #165DFF;
        background-color: #F9FCFF;
    }
}
</style>
